import React from 'react';
import Api from 'Utils/api';
import dialog from 'Utils/dialog';
import { RESOURCE_HOST } from 'Constants/config';
import VR_TYPE from 'Constants/vrType';
import './index.scss';

class VrDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      VrId: props.params.id,
      record: {}
    }
  }
  componentWillMount() {
    this.initData();
  }
  initData() {
    const api = new Api({
      method: 'GET',
      path: `/documents/${this.state.VrId}`,
      success: (json) => {
        this.setState({
          record: json,
          mediaType: json.media_type
        }, () => {
          const { mediaType } = this.state;
          if (mediaType === VR_TYPE.video) {
            this.vrVideo = new VRView.Player('#vrview', {
              width: '100%',
              height: '250',
              video: `${RESOURCE_HOST}${json.media}`,
              is_stereo: false,  // 区分是mono还是stereo
            });
          } else if (mediaType === VR_TYPE.img) {
            this.vrImg = new VRView.Player('#vrview', {
              width: '100%',
              height: '250',
              image: `${RESOURCE_HOST}${json.media}`,
              is_stereo: false,  // 区分是mono还是stereo
            });
          }
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  render() {
    const { record } = this.state;
    return (
      <div className="vr-detail-page">
        <div id="vrview" className="vr" />
        <div className="vr-wrap">
          <div className="vr-title">
            { record.title || ''}
          </div>
          <div className="vr-content">
            {record.content ? <span dangerouslySetInnerHTML={{ __html: record.content.replace(/\n/g, '<br/>') }} /> : ''}
          </div>
        </div>
      </div>
    )
  }
}

export default VrDetail;
